<section style="width: 100%">
  <div class="devui-input-group devui-dropdown-origin">
    <input
      class="devui-input devui-form-control"
      placeholder="y/MM/dd  -  y/MM/dd"
      name="dp"
      [(ngModel)]="dateRange"
      (click)="dateRangePicker.toggle()"
      autocomplete="off"
      dDateRangePicker
      #dateRangePicker="dateRangePicker"
      (selectedRangeChange)="getValue($event)"
      [customViewTemplate]="myCustomview"
      [hideOnRangeSelected]="false"
    />
    <div *ngIf="everyRange(dateRange)" class="devui-input-group-addon close-icon-wrapper" (click)="dateRangePicker.clearAll()">
      <i class="icon icon-close"></i>
    </div>
    <div class="devui-input-group-addon" (click)="dateRangePicker.toggle()">
      <i class="icon icon-calendar"></i>
    </div>
  </div>
  <ng-template #myCustomview let-chooseDate="chooseDate" let-rangeStart="rangeStart" let-rangeEnd="rangeEnd" let-datePicker>
    <div class="box">
      <div class="singleTemplate">
        <d-button bsStyle="common" (btnClick)="chooseDate([getDay(-1), rangeEnd])" bsSize="sm"> yesterday </d-button>
        <d-button bsStyle="common" (btnClick)="chooseDate([getDay(-7), rangeEnd])" bsSize="sm"> last week </d-button>
      </div>
      <div class="singleTemplate">
        <d-button bsStyle="common" (btnClick)="chooseDate([rangeStart, getDay(0)])" bsSize="sm"> today </d-button>
        <d-button bsStyle="common" (btnClick)="chooseDate([rangeStart, getDay(1)])" bsSize="sm"> tomorrow </d-button>
      </div>
    </div>
  </ng-template>
</section>
